<!--
 * @Descripttion: 
 * @version: 
 * @Author: wutao
 * @LastEditors: wutao
 * @LastEditTime: 2025-09-22 13:27:31
-->
<!--
 * @Descripttion: 
 * @version: 
 * @LastEditTime: 2025-08-12 22:14:20
-->
<template>
  <div id="app">
    <div class="top-titles">
      <div class="titleLeft">
        <span class="left-icon" @click="returns"></span>
        <span class="center-imgs"></span>
        <span class="right-name">小元助理</span>
      </div>
      <div class="rightImg" @click="rightbox"></div>
      <div class="dailog_box" v-show="dailogbox">
        <div
          class="dailog_content"
          v-for="(item, index) in gdlist"
          :key="index"
          @click="topRightdialog(index)"
        >
          <img :src="item.image" class="dailog_icon" />
          <span class="dailog_text">{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div
      class="_body"
      ref="scrollRef"
      :class="{ 'debug-ref': !$refs.scrollRef }"
      @click="closedailog"
      :style="{
        height: gnbottomadd ? 'calc(100vh - 355px)' : 'calc(100vh - 253px)',
      }"
    >
      <historicalRecord
        ref="historicalRecord"
        @isloadHistory="isloadHistory"
        class="_history"
        :session="session"
        @flagType="flagType"
        @loadHistory="loadHistory"
      ></historicalRecord>
      <!-- <top-loading :isLoading="isLoading" /> -->
      <!-- 欢迎回来 -->

      <!-- <div style="height: 600px" v-if="!flagTypeData"></div> -->

      <div
        class="_cell"
        ref="scrollCell"
        :class="{ 'type-one-cell': item.type == 1 }"
        v-for="(item, index) in sessionArr"
        :key="index"
      >
        <!-- :style="{
        marginTop: index === 0 ? headerHeight + 'px' : 0,
      }" -->
        <template v-if="item.type != 1">
          <div class="_question-box">
            <div class="_question" @click="goToQuestion(item.question)">
              {{ item.question }}
            </div>
          </div>
          <div
            class="dot-loading"
            v-if="isLoadingDian && index === sessionArr.length - 1"
          >
            <span class="dot">.</span>
            <span class="dot">.</span>
            <span class="dot">.</span>
          </div>
          <MblmRender
            ref="blmRender"
            v-if="showNormal && showJgyRender && item.session.isBlm == 1"
            :session="item.session"
            :answers="item.session.blmParseData"
            @click-sug-item="clickSugFun"
            @isUseFun="isUseFun"
            :question="item.question"
            :isflagCollectMb="item.isflagCollect"
            :isShowUse="sessionArr"
            :isGenerate="index == sessionArr.length - 1 ? isuse : false"
            :tabIndex="tabIndex"
            :thinkingToSwitc="thinkingToSwitch"
            :index="index"
            :itemDataMblmRender="item"
          />
        </template>
        <normalRender
          v-if="
            showNormal &&
            item.session &&
            item.session.isBlm == 0 &&
            item.question != '热门问句' &&
            item.question != '今日大盘动向'
          "
          :answers="item.session.answers"
          :session="item.session"
        />

        <!-- item.type==1 区分历史消息跟现在消息 -->
        <div
          v-if="
            item.question == '热门问句' ||
            (item.type == 1 && topList.length <= 0)
          "
        >
          <div v-if="index === welcomeRenderIndexOnce && topList.length <= 0">
            <div class="top_hytitle">
              <div class="letf_line"></div>
              <div class="center_text">欢迎回来</div>
              <div class="right_line"></div>
            </div>
          </div>

          <parentsBox :RilistProps="Rilist" :marginLeft="true" />
        </div>
        <div
          v-if="
            item.question == 'kapian' && item.type == 1 && topList.length > 0
          "
        >
          <div class="top_hytitle">
            <div class="letf_line"></div>
            <div class="center_text">欢迎回来</div>
            <div class="right_line"></div>
          </div>
          <div
            v-for="(item, indexTopList) in topList"
            :key="indexTopList"
            :ref="item.type"
          >
            <zxrb :topList="item" v-if="item.type == 'zxrb'" :isShadow="urlType == 'zxrb' && ShadowType"/>
            <saolei :topList="item" v-if="item.type == 'sl'" :isShadow="urlType == 'sl' && ShadowType"/>
            <ztfx :topList="item" v-if="item.type == 'ztfx'" :isShadow="urlType == 'ztfx' && ShadowType"/>
            <tggd :topList="item" v-if="item.type == 'tggd'"   :isShadow="urlType == 'tggd' && ShadowType"
/>
            <zsgzlc :topList="item" v-if="item.type == 'zsgzlc'" :isShadow="urlType == 'zsgzlc' && ShadowType" />
            <tzzwb :topList="item" v-if="item.type == 'tzzwbwb'" :isShadow="urlType == 'tzzwbwb' && ShadowType"/>

            <tzzzb :topList="item" v-if="item.type == 'tzzwbzb'" :isShadow="urlType == 'tzzwbzb' && ShadowType"/>
            <tzzmrsp :topList="item" v-if="item.type == 'tzzwbmrsp'" :isShadow="urlType == 'tzzwbmrsp' && ShadowType"/>
            <clxg :topList="item" v-if="item.type == 'clxg'" :isShadow="urlType == 'clxg' && ShadowType"/>
            <mrztqz :topList="item" v-if="item.type == 'mrztqq'" :isShadow="urlType == 'mrztqq' && ShadowType"/>
            <blz :topList="item" v-if="item.type == 'tzblz'" :isShadow="urlType == 'tzblz' && ShadowType"/>
            <ydzd :topList="item" v-if="item.type == 'ydzd'" :isShadow="urlType == 'ydzd' && ShadowType"/>
            <jb
              :topList="item"
              v-if="item.type == 'jbnb' || item.type == 'jbyjb'" :isShadow="urlType == 'jbyjb' && ShadowType"
            />
            <jjrgzlc :topList="item" v-if="item.type == 'jjrgzlc'" :isShadow="urlType == 'jjrgzlc' && ShadowType" />

            <jdfp :topList="item" v-if="item.type == 'jdfp'"  :isShadow="urlType == 'jdfp' && ShadowType"/>

            <videoEtf
              :topList="item"
              v-if="
                item.type == 'video' ||
                item.type == 'jptjjjjz' ||
                item.type == 'jptjXS' ||
                item.type == 'jptjgsgz' ||
                item.type == 'jptjxsrs' ||
                item.type == 'jptjxsgn' ||
                item.type == 'jptjjjjs' ||
                item.type == 'jptjgstz' ||
                item.type == 'jptjgsgn' ||
                item.type == 'jptjgsjz' ||
                item.type == 'jptjetf'
              "
            :isShadow="(urlType == 'video'||urlType == 'jptjjjjz'||urlType == 'jptjXS'||urlType == 'jptjgsgz'||urlType == 'jptjxsrs'||urlType == 'jptjxsgn'||urlType == 'jptjjjjs'||urlType == 'jptjgstz'||urlType == 'jptjgsgn'||urlType == 'jptjgsjz'||urlType == 'jptjetf') && ShadowType"/>
            <srydzd :topList="item" v-if="item.type == 'srydzd'" :isShadow="urlType == 'srydzd' && ShadowType"/>
            <ptydzd :topList="item" v-if="item.type == 'ptydzd'" :isShadow="urlType == 'ptydzd' && ShadowType"/>
            <srtx :topList="item" v-if="item.type == 'srtx'&&srtxType" />
           <srtxImg :topList="item" v-if="item.type == 'srtx'" />
          </div>
        </div>
      </div>
    </div>
    <div class="_footer">
      <div class="rets">
        <div
          class="tj_content"
          v-for="(item, index) in tjList"
          :key="index"
          :style="{
            marginLeft: index === 0 ? '2px' : '10px',
          }"
          @click="redjscontent(index)"
        >
          <img
            :src="
              index == 0
                ? require('@/assets/images/name_icon.png')
                : index == 1
                ? require('@/assets/images/answer‌_icon.png')
                : index == 2
                ? require('@/assets/images/trend_icon.png')
                : require('@/assets/images/kaihu_logo.png')
            "
            class="icons"
          />
          <span>{{ item.labelName }}</span>
        </div>
      </div>
      <div
        class="_input-deepThink"
        :class="{ isInitialHeight: !isInitialHeight }"
      >
        <img
          class="isDeepThink"
          :src="
            thinkingToSwitch == 1
              ? require('@/assets/images/zn3.png')
              : require('@/assets/images/znCheck3.png')
          "
          @click="thinkingToSwitch = thinkingToSwitch === 1 ? 2 : 1"
        />

        <!-- <img
          class="isDeepThink"
          :src="aipopupitemImgIsCheck[tabIndex]"
          @click="deepThinkFun"
        /> -->

        <textarea
          class="_input"
          rows="1"
          ref="myTextarea"
          v-model="question"
          :disabled="isGenerate"
          placeholder="有问题就问小元"
          @input="autoResize"
          @keyup.enter="sendMessage()"
          v-show="audioType == 1"
          @focus="handleFocus"
          @blur="handleBlur"
        />
        <div
          class="_input"
          v-show="audioType == 2"
          style="width: 230px"
          @touchstart.prevent.stop="handleTouchStart('input', $event)"
          @touchend.prevent.stop="handleTouchEnd('input', $event)"
          @touchcancel.prevent.stop="handleTouchCancel('input', $event)"
        >
          按住说话
        </div>

        <div class="right-btn">
          <img
            class="img_hua"
            :src="
              audioType == 1
                ? require('@/assets/images/huatong.png')
                : require('@/assets/images/yuyin_jpicon.png')
            "
            alt
            @click.stop="audioTypeClick"
          />
          <button
            :class="[sendBtnActive ? 'sentBtnInner' : 'sendBtn']"
            @click="bottomupload(sendBtnActive)"
          ></button>
        </div>
        <div class="ai-popup" v-show="aiPopupType">
          <div class="img-box">
            <div
              class="ai-popup-item"
              v-for="(item, index) in aipopupitemList"
              :key="index"
              @click="switchAipopupitem(index)"
            >
              <img
                class="ai-popup-item-img"
                :src="
                  index == tabIndex
                    ? aipopupitemImgIsCheck[item.image]
                    : aipopupitemImg[item.image]
                "
                alt=""
              />

              <div class="ai-popup-item-text">
                <span :style="{ color: index == tabIndex ? '#0883F1' : '' }">{{
                  item.title
                }}</span>
                <span>{{ item.sub }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="gnbottomadd" v-show="gnbottomadd">
        <div
          class="gnbottomadd_content"
          v-for="(item, index) in bottomlist"
          :key="index"
          @click="showItemFun(index)"
        >
          <img :src="item.image" class="jgn_buttomimgs" alt="" />
          <div class="jgn_buttomtext">{{ item.name }}</div>
        </div>
      </div>
      <div class="text">内容仅供参考，不构成投资建议</div>
    </div>
    <!--  使用须知  -->
    <van-popup
      v-model="usershows"
      style="border-radius: 15px; overflow: hidden; z-index: 111111"
    >
      <div class="useKonws">
        <div class="useTop">
          <span class="useTopText">使用须知</span>
          <p class="titleText">使用国元点金之前,请阅读并同意相关使用协议</p>
          <span class="textShuo">《模型服务协议》</span>
          <span class="textShuo">《用户隐私协议》</span>
          <van-radio-group v-model="radio" class="useRadio">
            <van-radio name="1">我已阅读并同意以上服务协议及隐私协议</van-radio>
          </van-radio-group>
        </div>
        <div class="useBtn">
          <van-button type="default" class="btn">取消</van-button>
          <van-button type="default" class="btn" @click="sure">确定</van-button>
        </div>
      </div>
    </van-popup>

    <!-- 我的收藏 -->
    <van-popup
      v-model="showCollect"
      closeable
      close-icon="close"
      position="bottom"
      :style="{ height: '415px', 'border-radius': '15px 15px 0px 0px' }"
    >
      <div class="title">我的收藏</div>
      <div class="collectOutbox">
        <ul class="collectList">
          <li
            v-for="(item, index) in collectionArr"
            :key="index"
            class="collectItem"
          >
            <div
              class="itemLeftBox"
              @click="sendMessageBy(item)"
              style="width: 400px"
            >
              <span class="collectIcon"></span>
              <span class="collectText">{{ item }}</span>
            </div>

            <van-popover v-model="showPopoverList[index]" trigger="click">
              <div style="box-sizing: border-box">
                <van-cell
                  @click="collectionFun('collect', item)"
                  style="width: 100%"
                >
                  <div style="display: flex; align-items: center">
                    <span style="margin-right: 5px">取消收藏</span>
                    <i class="deleteIcon"></i>
                  </div>
                </van-cell>
              </div>

              <template #reference>
                <van-button class="moreIcon"></van-button>
              </template>
            </van-popover>
          </li>
        </ul>
      </div>
      <div class="submitBox">
        <!-- <van-button type="primary" class="btnPrimary" @click="submit"
          >提交</van-button
        > -->
      </div>
    </van-popup>

    <!-- 按住说话 -->
    <van-popup
      v-model="audioAuto"
      position="bottom"
      @close="audioAutoClose"
      :style="{ height: '373px', 'border-radius': '15px 15px 0px 0px' }"
    >
      <div class="audioAutoBox" style="height: 373px">
        <div
          class="audioAutoBox-top"
          @click="
            audioAuto = false;
            questionAudio = '';
          "
        >
          <img src="@/assets/images/yuyin_bottomicon.png" alt="" />
        </div>

        <textarea
          class="questionAudio"
          rows="1"
          placeholder="请说话"
          v-model="questionAudio"
        />
        <p class="tell_p" v-show="audioTrue == false">按住继续说话</p>
        <div class="audioAutoBox-btn">
          <img
            class="line-img"
            src="@/assets/images/yuyin_line.png"
            alt=""
            v-show="audioTrue == true"
          />
          <div
            class="clear-questionAudio"
            @click="questionAudio = ''"
            v-show="audioTrue == false"
          >
            清空
          </div>

          <div
            class="icon-img"
            @touchstart.prevent.stop="handleTouchStart('icon', $event)"
            @touchend.prevent.stop="handleTouchEnd('icon', $event)"
            @touchcancel.prevent.stop="handleTouchCancel('icon', $event)"
          ></div>
          <div
            class="clear-save"
            @click="
              question = questionAudio;
              sendMessage();
              questionAudio = '';
              audioAuto = false;
            "
            v-show="audioTrue == false"
          >
            发送
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import MblmRender from "@/components/blm/MblmRender.vue";
import parentsBox from "@/components/parentsBox/index.vue";
import saolei from "@/components/welcomeData/saolei.vue"; //扫雷
import zxrb from "@/components/welcomeData/zxrb.vue"; //自选日报
import ztfx from "@/components/welcomeData/ztfx.vue"; //涨停分析
import tggd from "@/components/welcomeData/tggd.vue"; //投顾观点
import videoEtf from "@/components/welcomeData/video.vue"; //精品投教etf
import blz from "@/components/welcomeData/blz.vue"; //避雷针
import ydzd from "@/components/welcomeData/ydzd.vue"; //月度账单
import zsgzlc from "@/components/welcomeData/zsgzlc.vue"; //周四理财国债
import tzzwb from "@/components/welcomeData/tzzwb.vue"; //投资早晚报...午报
import tzzzb from "@/components/welcomeData/tzzzb.vue"; //投资早晚报...早报
import tzzmrsp from "@/components/welcomeData/tzzmrsp.vue"; //投资早晚报...每日收评
import mrztqz from "@/components/welcomeData/mrztqz.vue"; //明日主题前瞻
import clxg from "@/components/welcomeData/clxg.vue"; //策略选股
import srtx from "@/components/welcomeData/srtx.vue"; //生日提醒
import jdfp from "@/components/welcomeData/jdfp.vue"; //焦点复盘
import jb from "@/components/welcomeData/jb.vue"; //季报
import jjrgzlc from "@/components/welcomeData/jjrgzlc.vue"; //节假日理财
import srydzd from "@/components/welcomeData/srydzd.vue"; //收益1
import ptydzd from "@/components/welcomeData/ptydzd.vue"; //收益2
import srtxImg from "@/components/welcomeData/srtxImg.vue"; //收益2


import normalRender from "@/components/normal/normalRender.vue";
import Vue from "vue";
import { Toast } from "vant";

import { loadScript } from "@/utils/common.js";
import { rewriteJGYFunc } from "@/utils/rewriteJGY";
import { getUrlParams } from "@/utils/common";
import SvgIcon from "@/components/SvgIcon";
import historicalRecord from "@/components/historicalRecord/historicalRecord.vue";
import TopLoading from "@/components/topLoading/topLoading.vue";
import request from "@/utils/request";
import topList from "@/mock/topList";

import {
  detectDeviceType,
  _getRandomUserId,
  _getSessionCode,
  _getSessionId,
  getRandomStr,
  getReqid,
  copyText,
} from "@/utils/common";
import commonFunc from "@/utils/ysjh";
const JGY_TYPES = [
  "finance",
  "iwencai",
  "news",
  "zhengu",
  "talk",
  "soniu",
  "kefu",
];
export default {
  name: "App",
  components: {
    MblmRender,
    normalRender,
    SvgIcon,
    historicalRecord,
    TopLoading,
    parentsBox,
    saolei,
    srtxImg,
    ztfx,
    tggd,
    videoEtf,
    blz,
    ydzd,
    zxrb,
    zsgzlc,
    tzzwb,
    mrztqz,
    tzzzb,
    tzzmrsp,
    clxg,
    srtx,
    jdfp,
    jb,
    jjrgzlc,
    srydzd,
    ptydzd,
  },
  data() {
    return {
      srtxType:false,
      ShadowType:false,
      isLoadingDian: false,
      // 外层 _input 相关状态
      inputLongPressTimer: null,
      inputLongPressTriggered: false,

      // 弹窗 icon-img 相关状态
      iconLongPressTimer: null,
      iconLongPressTriggered: false,

      // 录音及弹窗状态（共用）
      audioAuto: false,
      audioTrue: false,
      questionAudio: "",
      typingTimer: null,
      typingTimer: null,
      audioType: 1,
      welcomeRenderIndex: -1, // 第一次渲染的位置
      initialHeight: null,
      isInitialHeight: true,
      inputBoxObserver: null,
      pollingTimer: null,
      thinkingToSwitch: 1,
      kefuindex: 0,
      showPopoverList: [],
      showCollect: false,
      flagTypeData: false,
      tabIndex: 1,
      aiPopupType: false,
      aipopupitemList: [
        { image: "0", title: "智能调度", sub: "根据会话任务，智能调度模型" },
        { image: "1", title: "快速推理", sub: "简单推理，快速响应" },
        { image: "2", title: "深度思考", sub: "多步规划，深度推理" },
      ],
      aipopupitemImg: [
        require("@/assets/images/zn1.png"),
        require("@/assets/images/zn2.png"),
        require("@/assets/images/zn3.png"),
      ],
      aipopupitemImgIsCheck: [
        require("@/assets/images/znCheck1.png"),
        require("@/assets/images/znCheck2.png"),
        require("@/assets/images/znCheck3.png"),
      ],
      userxzshows: true, //用户须知是否第一次进来
      radio: undefined,
      usershows: true,
      mlbarr: [],
      flag: 0,
      questionNew: "",
      flagHistory: false,
      isLoadingHistory: false,
      // 新增
      isLoading: false,
      headerHeight: 10,
      isShowUse: true,
      collectionArr: [],
      //收藏问句
      deep_thinking: "",
      //深度思考的入参
      sendBtnActive: false,
      deepClass: "chat-icon-deepthinking",
      deep: false,
      type: "noCollect",
      sessionArr: [{ type: 1, question: "热门问句" }],
      question: "",
      isGenerate: false,
      isAutoScrolling: false,
      // 新增标志位
      session: {
        sessionId: "123",
        isBlm: -1,
        isSignal: 0,
        blmParseData: [],
        blmOpts: {
          showStep: false,
          answerSatge: window.chatSseSdk.ANSWER_STAGE.UNKNOW,
        },
        answers: {},
        // 推荐问句数据格式

        response: {},
      },
      sessionNormal: {
        sessionId: "1234",
        isBlm: -1,
        isSignal: 0,
        blmParseData: [],
        blmOpts: {
          showStep: false,
        },
        answers: {},
        // 推荐问句数据格式

        response: {},
      },
      showNormal: false,
      showJgyRender: false,
      tjList: [],
      //底部推荐内容
      gdlist: [
        {
          image: require("@/assets/images/sm_logo.png"),
          name: "免责声明",
        },
        {
          image: require("@/assets/images/jy_logo.png"),
          name: "备案信息",
        },
        {
          image: require("@/assets/images/line_kf.png"),
          name: "在线客服",
        },
        {
          image: require("@/assets/images/baxx_logo.png"),
          name: "反馈与建议",
        },
      ],
      bottomlist: [
        {
          image: require("@/assets/images/jgn_buttomimgs.png"),
          name: "图片",
        },
        {
          image: require("@/assets/images/jgn_buttomxj.png"),
          name: "拍照",
        },
        {
          image: require("@/assets/images/jgn_buttomxsc.png"),
          name: "收藏",
        },
      ],
      //热门问句
      Rilist: [],
      isuse: false,
      dailogbox: false,
      //默认盒子不展示
      gnbottomadd: false,
      _lastScrollTop: 9999, // 初始化为大于0，防止首次触发
      isLoadingHistory: false,
      isAutoScrolling: false,
      scrollTriggerBuffer: 5, // scrollTop 小于多少认为“触底”
      collectionArr: [],
      topList: [],
      isShow: true,
      indextype: "",
      urlQues: "",
      urlType: "",
      isSdkReady: false,
      showBirthdayModal: false, //默认生日快乐不展示
    };
  },
  computed: {
    welcomeRenderIndexOnce() {
      return this.sessionArr.findIndex(
        (item) =>
          item.question === "热门问句" ||
          (item.type === 1 && this.topList.length <= 0)
      );
    },
  },

  watch: {
    question: {
      immediate: true,
      handler(newVal) {
        if (newVal && newVal.trim() !== "") {
          this.sendBtnActive = true;
        } else {
          this.sendBtnActive = false;
        }
      },
    },

    sessionArr: {
      immediate: true,
      handler(newVal) {
        if (newVal != "" && this.collectionArr != "") {
          const collectStrSet = new Set(this.collectionArr.map(String));

          // 记录重复的 question 最后出现的位置
          const lastIndexMap = new Map();

          newVal.forEach((item, index) => {
            if (collectStrSet.has(item.question)) {
              lastIndexMap.set(item.question, index); // 不断更新为最后一次出现的位置
            }
          });

          newVal.forEach((item, index) => {
            if (lastIndexMap.get(item.question) === index) {
              item.isflagCollect = true; // 只有最后一次出现的位置才加
            }
          });

          this.sessionArr = newVal;
        }
      },
    },
  },
  created() {
    if (localStorage.getItem("userxzshows") == "false") {
      this.usershows = false;
    }
    if (localStorage.getItem("tabIndex") == null) {
      this.tabIndex = 1;
    } else {
      this.tabIndex = localStorage.getItem("tabIndex");
    }
    // 1. 原生和H5获取url
    //原生的两种格式1、http://172.31.134.86:8080/?skin=0&isElderVersion=false&GYIconColor=2&ques=近期政策对哪些板块有影响？这种页面进来直接停留最新卡片、获取que内容提问
    //2、http://172.31.134.86:8080/?ques=关注的股票机会信号有更新，请查收~&type=zxrb   这种多了一个type类型;直接停留在对应的卡片type
    //H5:http://172.31.134.86:8080?ques=国元证券今日资讯汇总解读 和第一种一样跳转小元页面停留最新卡片、获取que内容提问
    // const queryString = window.location.search.substr(1);
    // let ques = "";
    // let type = "";
    // if (queryString) {
    //   const params = queryString.split("&");
    //   for (let i = 0; i < params.length; i++) {
    //     const pair = params[i].split("=");
    //     console.log(pair);

    //     if (pair[0] == "ques") ques = decodeURIComponent(pair[1] || "");
    //     if (pair[0] == "type") type = decodeURIComponent(pair[1] || "");
    //   }
    // }
    // this.indextype = type;
    // this.urlQues = ques; // 暂存 URL 中的问题，不立即调用 sendMessage
    // this.urlType = type;
    // 在浏览器中直接使用（支持 URL 和 URLSearchParams）
    const url = new URL(window.location.href); // 或 new URL(document.location)
    console.log(url, "url");
    const params = url.searchParams;
    console.log(params.get("ques"), "params.get");
    if (params.get("ques")) {
      this.urlQues = params.get("ques").replace(/\*/g, "%");
    }

    this.indextype = params.get("type");
    this.urlType = params.get("type");
    console.log(this.urlType, "this.urlType");
    console.log(this.urlQues, "this.urlQues");

    this.getrmtablist();
    this.normallist();
    this.getTopList();
  },
  beforeDestroy() {
    if (this.inputBoxObserver) {
      this.inputBoxObserver.disconnect();
      this.inputBoxObserver = null;
    }
    if (this.pollingTimer) {
      clearInterval(this.pollingTimer);
      this.pollingTimer = null;
    }
    // 解绑事件，防止内存泄漏
    const scrollContainer = this.$refs.scrollRef;
    if (scrollContainer && this._onScroll) {
      scrollContainer.removeEventListener("scroll", this._onScroll);
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        const el = this.$el.querySelector("._input-deepThink");
        if (!el) {
          console.warn("元素._input-deepThink不存在");
          return;
        }

        // 1️⃣ 延迟初始化高度，避免初始抖动（如字体未加载等）
        this.initialHeight = el.offsetHeight;
        this.isInitialHeight = true;
        // 2️⃣ 设置监听器：使用 ResizeObserver 或轮询
        const handle = (height) => {
          const delta = Math.abs(height - this.initialHeight);
          const tolerance = 2;

          if (delta <= tolerance) {
            if (!this.isInitialHeight) {
              this.isInitialHeight = true;
            }
          } else {
            if (this.isInitialHeight) {
              this.isInitialHeight = false;
            }
          }
        };

        if (window.ResizeObserver) {
          this.inputBoxObserver = new ResizeObserver((entries) => {
            const height = entries[0].contentRect.height;
            handle(height);
          });
          this.inputBoxObserver.observe(el);
        } else {
          this.pollingTimer = setInterval(() => {
            const currentHeight = el.offsetHeight;
            handle(currentHeight);
          }, 200);
        }
      }, 100); // ⏱️ 适当延迟初始化，避免早期干扰
    });

    //获取主动推荐数据
    commonFunc.openService("", "9", "D_GRZX_TJ", {
      mark: "1",
      operateType: "2",
    });
    // 获取主动推荐回调函数
    window.setOpenState = (state) => {
      // 1. 先解析 JSON 字符串（如果是字符串）
      console.log(typeof state, "state");
      console.log(state, "state");
      const parsedState = typeof state === "string" ? JSON.parse(state) : state;
      console.log(parsedState, "parsedStateparsedState");
      console.log(
        Object.keys(parsedState.result).length,
        "Object.keys(parsedState.result).length"
      );
      if (Object.keys(parsedState.result).length == 0) {
        return;
      }
      // 更新组件数据
      const arrs = parsedState.result.messageList.slice().sort((a, b) => {
        return Number(a.createTime) - Number(b.createTime); //顺序
      });
      console.log(arrs, "arrs");
      this.topList = arrs;
      console.log(arrs[0].card, "arrs.card");
      console.log(arrs[0].title, "arrs.title");
      if (this.topList) {
        this.sessionArr = [{ type: 1, question: "kapian" }];
        this.topList.forEach(item=>{
          if(item.type=='srtx'){
            this.srtxType = true 
          }
          setTimeout(() => {
            this.srtxType = false 
          }, 3700);
        })
      }
      console.log(this.topList, "this.topList ");
      if (this.topList != 0) {
        const readList = parsedState.result.messageList.map((item) => item.no);
        console.log(readList, "readList");
        // commonFunc.openService("", "9", "D_GRZX_TJ", {
        //   mark: "1",
        //   operateType: "3",
        //   readList: readList,
        // });
      }

       
      if (this.urlType) {
        this.$nextTick(() => {
          if (this.urlType && this.topList) {
            const targetEl = this.$refs[this.urlType];
            const container = this.$refs.scrollRef;

            if (targetEl && targetEl.length && container) {
              // 取最后一个元素
              const lastEl = targetEl[targetEl.length - 1];
              const offset = lastEl.offsetTop;

              container.scrollTo({
                top: offset - 100,
                // behavior: "smooth"
              });
            }
          }
        });
        this.ShadowType = true
        setTimeout(() => {
        this.ShadowType = false
          
        }, 2000);
      } else {
        if (this.topList) {
          this.$nextTick(() => {
            if (this.$refs.scrollRef) {
              this.$refs.scrollRef.scrollTo({
                top: this.$refs.scrollRef.scrollHeight,
              });
            }
          });
        }
      }

    };
    this.isCollectFun();
    this.$refs.blmRender?.getCollect();
    // 先加载脚本，再处理渲染逻辑
    loadScript("./lib/zhengu-lib/d3.js").then(() => {
      loadScript("./lib/zhengu-lib/v7.61.0/jgyRenderLib.34f337da.js").then(
        () => {
          Vue.use(window.jgyRenderLib, { locale: "zh-CN" });
          this.showJgyRender = true;
          console.log("Script has been loaded and executed.");
        }
      );
    });

    loadScript("./lib/zhengu-lib/v7.31.1/jgyLib.js").then(() => {
      Vue.use(window.b2bjgyLib);
      rewriteJGYFunc();
      this.showNormal = true;
      this.isSdkReady = true; // SDK 加载完成，标记为 true

      // 检查是否需要触发 sendMessage
      if (this.urlQues && !this.urlType) {
        this.question = this.urlQues;
        console.log("进来1");
        this.$nextTick(() => {
          if (this.$refs.scrollRef) {
            this.$refs.scrollRef.scrollTo({
              top: this.$refs.scrollRef.scrollHeight,
            });
          }
        });
        this.$nextTick(() => this.sendMessage());
      }

      this.showNormal = true;

      // 所有脚本加载完成后，确认 scrollRef 存在
      this.$nextTick(() => {
        if (!this.$refs.scrollRef) {
          // console.warn("所有脚本加载完成后，仍未找到 scrollRef");
        }
      });
      this.$nextTick(() => {
        const scrollContainer = this.$refs.scrollRef;
        if (!scrollContainer) return;

        let startY = 0;

        // 原来的滚动监听
        this._onScroll = () => {
          if (this.gnbottomadd) {
            this.gnbottomadd = false;
          }
          this.$refs.myTextarea.blur();
          const currentScrollTop = scrollContainer.scrollTop;
          const delta = this._lastScrollTop - currentScrollTop;
          const isUserPullingDown = delta > 5;

          if (
            currentScrollTop <= this.scrollTriggerBuffer &&
            isUserPullingDown &&
            !this.isLoadingHistory &&
            !this.isAutoScrolling
          ) {
            this.isLoadingHistory = true;
            this.$refs.historicalRecord.loadHistory().finally(() => {
              this.isLoadingHistory = false;
            });
          }

          if (currentScrollTop === 0 && !this.isAutoScrolling) {
            this.isAutoScrolling = true;
            this.$nextTick(() => {
              scrollContainer.scrollTo({
                top: 27,
                // behavior: "smooth",
              });
            });
            setTimeout(() => {
              this.isAutoScrolling = false;
            }, 500);
          }

          this._lastScrollTop = currentScrollTop;
        };

        scrollContainer.addEventListener("scroll", this._onScroll);

        // 🚀 新增：内容不够高时，启用 touch 下拉触发
        scrollContainer.addEventListener("touchstart", (e) => {
          startY = e.touches[0].clientY;
        });

        scrollContainer.addEventListener("touchmove", (e) => {
          const currentY = e.touches[0].clientY;
          const deltaY = currentY - startY;

          // 如果容器本身无法滚动（说明内容不满一屏）
          const noScroll =
            scrollContainer.scrollHeight <= scrollContainer.clientHeight;

          if (noScroll && deltaY > 30 && !this.isLoadingHistory) {
            this.isLoadingHistory = true;

            this.$refs.historicalRecord.loadHistory().finally(() => {
              this.isLoadingHistory = false;
            });
          }
        });
      });
    });
    this.updateHeaderHeight();
    this.initResizeObserver();
  },
  methods: {
    sendMessageBy(item) {
      console.log(item);
      this.question = item;
      this.sendMessage();
      this.showCollect = false;
    },
    handleCloseModal(e) {
      console.log(e, ", showBirthdayModal");
      this.showBirthdayModal = false;
    },
    handleFocus() {
      console.log("获取焦点事件");
    },
    handleBlur() {
      console.log("失去焦点事件");
    },
    audioAutoClose() {
      this.questionAudio = "";
      this.audioAuto = false;
      this.audioTrue = false;
      this.questionAudio = "";
    },
    handleTouchStart(source, e) {
      e.preventDefault();

      if (source === "input") {
        clearTimeout(this.inputLongPressTimer);
        this.inputLongPressTriggered = false;

        this.inputLongPressTimer = setTimeout(() => {
          this.inputLongPressTriggered = true;
          this.startRecording(source);
        }, 500);
      } else if (source === "icon") {
        clearTimeout(this.iconLongPressTimer);
        this.iconLongPressTriggered = false;

        this.iconLongPressTimer = setTimeout(() => {
          this.iconLongPressTriggered = true;
          this.startRecording(source);
        }, 500);
      }
    },

    handleTouchEnd(source, e) {
      e.preventDefault();
      e.stopPropagation();
      if (source === "input") {
        clearTimeout(this.inputLongPressTimer);
        if (this.inputLongPressTriggered) {
          this.stopRecording(source);
        }
        this.inputLongPressTriggered = false;
      } else if (source === "icon") {
        clearTimeout(this.iconLongPressTimer);
        if (this.iconLongPressTriggered) {
          this.stopRecording(source);
        }
        this.iconLongPressTriggered = false;
      }
    },

    handleTouchCancel(source, e) {
      if (source === "input") {
        clearTimeout(this.inputLongPressTimer);
        this.inputLongPressTriggered = false;
        this.cancelRecording(source);
      } else if (source === "icon") {
        clearTimeout(this.iconLongPressTimer);
        this.iconLongPressTriggered = false;
        this.cancelRecording(source);
      }
    },

    startRecording(source) {
      console.log(`🎤 开始录音，来自: ${source}`);
      this.audioAuto = true;
      this.audioTrue = true;

      const text = "你好，我是小元，有什么可以帮你？";
      let index = 0;
      this.typingTimer = setInterval(() => {
        if (index < text.length) {
          this.questionAudio += text[index];
          index++;
        } else {
          clearInterval(this.typingTimer);
          this.typingTimer = null;
        }
      }, 100);
      // 模拟输入代码略
    },

    stopRecording(source) {
      console.log(`🛑 结束录音，来自: ${source}`);
      this.audioTrue = false;
      // 不关闭弹窗
    },

    cancelRecording(source) {
      console.log(`❌ 取消录音，来自: ${source}`);
      this.audioTrue = false;
      if (this.typingTimer) {
        clearInterval(this.typingTimer);
        this.typingTimer = null;
      }
    },
    audioTypeClick() {
      this.audioType = this.audioType == 1 ? 2 : 1;

      if (this.audioType == 1) {
        this.$nextTick(() => {
          // 等待 v-show 渲染 DOM 后再聚焦
          if (this.$refs.myTextarea) {
            this.$refs.myTextarea.focus();
          }
        });
      }
    },
    handleHeightChange(height) {
      const isEqual = Math.abs(height - this.initialHeight) < 1;

      if (isEqual) {
        if (!this.isInitialHeight) {
          this.isInitialHeight = true;
          this.$nextTick(() => {});
        }
      } else {
        if (this.isInitialHeight) {
          this.isInitialHeight = false;
          this.$nextTick(() => {});
        }
      }
    },
    autoResize() {
      this.$nextTick(() => {
        const textarea = this.$refs.myTextarea;
        // console.log(textarea,'textareatextarea')
        if (textarea) {
          textarea.style.height = "auto"; // 先重置高度
          textarea.style.height = textarea.scrollHeight + "px"; // 设置为内容高度
        }
      });
    },

    getTopList() {
      console.log(topList);
      console.log(222222222222, this.urlType);

      //kapian 扫雷 ztfx 涨停分析 tggd 投顾观点 video百科视频 blz 避雷针 ydzd 月度账单
      this.sessionArr = [{ type: 1, question: "kapian" }];
      this.topList = topList;
      console.log(this.topList);
      if(this.topList){
        this.topList.forEach(item=>{
          console.log(item.type);
          if(item.type=='srtx'){
            this.srtxType = true 
          }
          setTimeout(() => {
            this.srtxType = false 
          }, 3700);
        })
      }
     
      if (this.urlType) {
        this.$nextTick(() => {
          if (this.urlType && this.topList) {
            const targetEl = this.$refs[this.urlType];
            const container = this.$refs.scrollRef;

            if (targetEl && targetEl.length && container) {
              // 取最后一个元素
              const lastEl = targetEl[targetEl.length - 1];
              const offset = lastEl.offsetTop;

              container.scrollTo({
                top: offset - 100,
                // behavior: "smooth"
              });
            }
          }
        });
        this.ShadowType = true
        setTimeout(() => {
        this.ShadowType = false
          
        }, 2000);
      } else {
        if (this.topList) {
          this.$nextTick(() => {
            if (this.$refs.scrollRef) {
              this.$refs.scrollRef.scrollTo({
                top: this.$refs.scrollRef.scrollHeight,
              });
            }
          });
        }
      }

      // this.$nextTick(() => {
      //   if(this.urlType){
      //   const targetEl = this.$refs[this.urlType];
      //   const container = this.$refs.scrollRef;

      //   if (targetEl && targetEl[0] && container) {
      //     // 算出元素相对于容器的 offsetTop
      //     const offset = targetEl[0].offsetTop;
      //     container.scrollTo({
      //       top: offset-100,
      //       behavior: "smooth"
      //     });
      //   }
      //   }
      // });

      // topList.forEach(item=>{
      //   if(item.type==a){
      // this.topList = item.data;
      // console.log(111,this.topList);

      //   }
      // })

      // this.$nextTick(() => {
      //   if (this.$refs.scrollRef) {
      //     this.$refs.scrollRef.scrollTo({
      //       top: this.$refs.scrollRef.scrollHeight,
      //     });
      //   }
      // });
    },
    collectionFun(type, question) {
      this.type = type;
      this.type == "noCollect"
        ? (this.type = "collect")
        : (this.type = "noCollect");

      const urls = getUrlParams();
      const obj = {
        userId: _getRandomUserId(),
        question: question,
        add_info: JSON.stringify({
          entranceId: urls.entranceId,
          stockName: "",
        }),
        reqid: getReqid(),
      };
      const formParams = new URLSearchParams();
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          formParams.append(key, obj[key]);
        }
      }
      let url = "";
      if (this.type == "collect") {
        url = "/saas/robot/investment/adapter/collectQuestion/add";
      } else {
        url = "/saas/robot/investment/adapter/collectQuestion/delete";
      }
      // 拼接参数到URL
      url += "?" + formParams.toString();
      fetch(url, {
        method: "GET",
        params: formParams,
      })
        .then((response) => response.json())
        .then((data) => {
          if (this.type == "noCollect") {
            Toast("取消收藏成功");
            this.gnbottomadd = false; //关闭底部按钮
          } else {
            Toast("收藏成功");
          }

          this.isCollectFun();
        });
    },

    submit() {
      this.showCollect = false;
    },
    // 查询问句是否已收藏
    isCollectFun(index) {
      if (index || index === 0) {
        this.showCollect = true;
      }
      const urls = getUrlParams();
      const obj = {
        userId: _getRandomUserId(),
        add_info: JSON.stringify({
          entranceId: urls.entranceId,
          stockName: "",
        }),
        reqid: getReqid(),
      };
      const formParams = new URLSearchParams();
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          formParams.append(key, obj[key]);
        }
      }
      let url = "/saas/robot/investment/adapter/collectQuestion/showData";
      // 拼接参数到URL
      url += "?" + formParams.toString();
      fetch(url, {
        method: "GET",
        params: formParams,
      })
        .then((response) => response.json())
        .then((res) => {
          // console.log(res, "第一个接口");
          if (res.data.length > 0) {
            this.collectionArr = res.data.map((item) => item.question);

            this.showPopoverList = this.collectionArr.map(() => false);
          } else {
            this.collectionArr = [];
          }
          const collectStrSet = new Set(this.collectionArr.map(String));

          // 找出每个匹配项的最后索引
          const lastIndexMap = new Map();

          this.sessionArr.forEach((item, index) => {
            if (collectStrSet.has(item.question)) {
              lastIndexMap.set(item.question, index);
            }
          });

          // 遍历设置 isflagCollect，仅最后一次的为 true，其余为 false
          this.sessionArr.forEach((item, index) => {
            if (lastIndexMap.get(item.question) === index) {
              item.isflagCollect = true;
            } else {
              item.isflagCollect = false;
            }
          });
          // console.log(this.sessionArr);
        });
    },
    flagType(e) {
      this.flagTypeData = e;
    },
    topRightdialog(index) {
      if (index == 2) {
        commonFunc.openService("", "", "KDS_ZXKF", {
          isChat: true,
        });
      }
      this.dailogbox = !this.dailogbox;
    },

    someMethod(e) {
      this.question = e;
      this.sendMessage();

      this.$nextTick(() => {
        const el = this.$refs.scrollRef;
        if (el) {
          el.scrollTo({
            top: el.scrollHeight,
            // behavior: "smooth", // 平滑滚动
          });
        }
      });
    },
    switchAipopupitem(e) {
      this.tabIndex = e;
      localStorage.setItem("tabIndex", this.tabIndex);
      this.aiPopupType = false;
    },
    //常见问题列表
    normallist() {
      let user_id = _getRandomUserId();
      let source = "b_customer_trail_04";
      let channel = "other";
      const obj = {
        direct_mode: "recommend",
        add_info: JSON.stringify({
          codeName: "同花顺",
          entranceIden: "index",
          entranceId: "index",
          stockName: "同花顺",
        }),
        codeName: "同花顺",
        entranceIden: "index",
        cache: "false",
        type: "get",
        dataType: "json",
        source: source,
        user_name: getRandomStr(10),
        version: "2.0",
        answerChannel: `${detectDeviceType()}_${channel}`,
        user_id: user_id,
        secondary_intent: "",
        sdk_version: "",
        mode: "preCloud",
        logid: `${user_id}${new Date().getTime()}`,
        reqid: getReqid(),
      };

      request
        .get("/saas/robot/center/", obj)
        .then((res) => {
          // console.log(res, "第三个接口");
          this.Rilist = JSON.parse(res.answer[0].txt[0].content);
          this.Rilist.forEach((item) => {
            item.contentIndex = 0;
          });
        })
        .catch((err) => {
          console.error("接口错误:", err);
        });
    },
    //热门问题tab栏
    getrmtablist() {
      let user_id = _getRandomUserId();
      let source = "b_customer_trail_04";
      let channel = "other";
      const obj = {
        direct_mode: "bottomlabel",
        add_info: JSON.stringify({
          codeName: "同花顺",
          entranceIden: "index",
          entranceId: "index",
          stockName: "同花顺",
        }),
        codeName: "同花顺",
        entranceIden: "index",
        cache: "false",
        type: "get",
        dataType: "json",
        source: source,
        user_name: getRandomStr(10),
        version: "2.0",
        answerChannel: `${detectDeviceType()}_${channel}`,
        user_id: user_id,
        secondary_intent: "",
        sdk_version: "",
        mode: "preCloud",
        logid: `${user_id}${new Date().getTime()}`,
        reqid: getReqid(),
      };

      request
        .get("/saas/robot/center/", obj)
        .then((data) => {
          this.tjList = data.data;
          // console.log(data.data, "第2个接口");
        })
        .catch((err) => {
          console.error("接口错误:", err);
        });
    },

    //底部tab栏点击事件
    redjscontent(index) {
      this.kefuindex = index;
      console.log(this.tjList[0].question, "tjList");
      if (index == 0) {
        this.question = this.tjList[0].question;
        this.sendMessage();
      }
      if (index == 2) {
        this.question = this.tjList[2].question;
        this.sendMessage();
      }
      if (index == 1) {
        this.question = this.tjList[1].question;
        this.sendMessage();

        this.$nextTick(() => {
          const el = this.$refs.scrollRef;
          if (el) {
            el.scrollTo({
              top: el.scrollHeight,
              // behavior: "smooth", // 平滑滚动
            });
          }
        });
      }
      if (index == 3) {
        this.question = this.tjList[3].question;
        this.sendMessage();
      }
    },
    showItemFun(index) {
      console.log(index);

      if (index == 2) {
        this.showCollect = true;
        this.isCollectFun();
        this.gnbottomadd = false;
      }
      this.flagTypeData = true;
    },

    sure() {
      this.userxzshows = false;
      localStorage.setItem("userxzshows", this.userxzshows);
      this.usershows = false;
    },
    isloadHistory(isLoading) {
      this.isLoadingHistory = isLoading;
      console.log(this.isLoadingHistory, "this.isLoadingHistory");
    },
    updateHeaderHeight() {
      this.headerHeight = this.$refs.header?.offsetHeight;
    },
    initResizeObserver() {
      const observer = new ResizeObserver(() => {
        this.updateHeaderHeight();
      });
      observer?.observe(this.$refs?.header);
    },
    bottomupload(bottomupload) {
      console.log(bottomupload, "bottomupload");
      if (bottomupload == false) {
        this.gnbottomadd = !this.gnbottomadd;
      } else {
        const textarea = this.$refs.myTextarea;
        if (textarea) {
          textarea.style.height = "auto"; // 先重置高度
          textarea.style.height = 24 + "px"; // 设置为内容高度
        }
        this.sendMessage();
      }
    },

    //头部右侧内容展示
    rightbox() {
      this.dailogbox = !this.dailogbox;
    },
    closedailog() {
      this.dailogbox = false;
      this.gnbottomadd = false;
    },
    //返回上一页
    returns() {
      commonFunc.openService("", "5", "FN_EMBED_H5_CLOSEVIEW", {});
    },
    //点击问题可以再次提问
    goToQuestion(item) {
      console.log(item, "item");
      this.question = item;
    },
    //历史记录
    loadHistory(history, pageNo) {
      if (history.length > 0) {
        // 1. 保存当前滚动位置和容器高度
        const container = this.$refs.scrollRef;
        const oldScrollTop = container.scrollTop;
        const oldScrollHeight = container.scrollHeight;

        // 2. 添加历史记录到顶部
        if (pageNo > 1) {
          this.sessionArr = [...history, ...this.sessionArr];
        } else {
          this.sessionArr = [...history, ...this.sessionArr];
        }
        console.log(this.sessionArr);

        // setTimeout(() => {
        //   this.$nextTick(() => {
        //     const container = this.$refs.scrollRef; // 你的滚动容器
        //     if (!container) {
        //       console.warn("没有找到滚动容器");
        //       return;
        //     }

        //     const els = container.querySelectorAll(".type-one-cell");
        //     if (els.length > 0) {
        //       const el = els[els.length - 1];

        //       // 元素相对滚动容器顶部的距离
        //       const elOffsetTop = el.offsetTop;

        //       // 容器滚动到该元素顶部，往上偏移 400px
        //       const targetScrollTop = elOffsetTop -350;

        //       container.scrollTo({
        //         top: targetScrollTop >= 0 ? targetScrollTop : 0,
        //         // behavior: "smooth",
        //       });
        //     }
        //   });
        // }, 1000);

        // 3. 在下一个渲染周期调整滚动位置
        this.$nextTick(() => {
          const newScrollHeight = container.scrollHeight;
          const heightAdded = newScrollHeight - oldScrollHeight;

          // 设置滚动位置为原位置加上新增内容的高度
          container.scrollTop = oldScrollTop + heightAdded;
        });
      }
    },

    isUseFun(clickType, question) {
      //复制
      if (clickType === "copyText") {
        copyText(question);
        // if (navigator.clipboard && window.isSecureContext) {
        //   navigator.clipboard
        //     .writeText(question)
        //     .then(() => {
        //       Toast("复制成功");
        //     })
        //     .catch((err) => {
        //       console.error("Clipboard API 复制失败", err);
        //       fallbackCopyText(question);
        //     });
        //   return;
        // } else {
        //   fallbackCopyText(text); // 兼容方案
        //   return;
        // }
        return;
      }

      if (clickType === "refresh") {
        this.question = question;
        this.sendMessage();
        return;
      }

      let channel = "other";
      let source = "b_customer_trail_04";
      const urls = getUrlParams();
      const obj = {
        user_id: _getRandomUserId(),
        answerChannel: `${detectDeviceType()}_${channel}`,
        companySource: "",
        session_code: _getSessionCode(32, 16),
        qaDataOrigin: "commonRobot",
        id: clickType,
        source: source,
        question: question,
        add_info: JSON.stringify({
          entranceId: urls.entranceId,
          stockName: "",
        }),
        reqid: getReqid(),
      };

      request
        .get("/saas/robot/buried/", obj)
        .then((res) => {
          if (clickType == "click_use") {
            const val = this.sessionArr[question].click_use;
            this.$set(
              this.sessionArr[question],
              "click_use",
              val === 1 ? 2 : 1
            );
          }

          if (clickType == "click_noUse") {
            const val = this.sessionArr[question].click_noUse;
            this.$set(
              this.sessionArr[question],
              "click_noUse",
              val === 1 ? 2 : 1
            );
          }
        })
        .catch((err) => {
          console.error("接口错误:", err);
        });
    },

    // 备用方案：创建隐藏 textarea 执行复制
    fallbackCopyText(text) {
      const textarea = document.createElement("textarea");
      textarea.value = text;
      textarea.readOnly = true;
      textarea.style.position = "absolute";
      textarea.style.left = "-9999px";
      document.body.appendChild(textarea);
      textarea.select();
      try {
        const result = document.execCommand("copy");
        if (result) {
          Toast("复制成功");
        } else {
          Toast("复制失败，请手动复制");
        }
      } catch (err) {
        console.error("execCommand 复制失败", err);
        Toast("复制失败，请手动复制");
      }
      document.body.removeChild(textarea);
    },
    deepThinkFun() {
      this.aiPopupType = !this.aiPopupType;
      return;
    },

    getCenterDataBySseSuccess(session, data, isOldCenter, voiceData, oriData) {
      this.isLoadingDian = false;
      console.log("-------------------d", data);
      console.log(session, "session");
      if (isOldCenter) {
        this.renderNormalData(data, session);
        session.isSignal = 1;
        return;
      }
      session.blmParseData = data;
      this.$nextTick(() => {
        if (this.$refs.scrollRef) {
          this.$refs.scrollRef.scrollTop = this.$refs.scrollRef.scrollHeight;
        }
      });
    },
    getCenterDataBySseError(session) {
      this.isLoadingDian = false;

      session.isBlm = -2;
      console.log("session.errorMsg", session.errorMsg);
    },
    stop() {
      if (this.sessionArr.length) {
        window.chatSseSdk.stopSseRequest(
          this.sessionArr[this.sessionArr.length - 1].session
        );
      }
    },
    clickSugFun(questionParams) {
      console.log("%c", "color: #FF8A00;font-size:20px;", questionParams);
      questionParams.events = this.deep_thinking;
      this.questionParams = questionParams;
      this.sendMessage();
    },
    sendMessage() {
      this.isLoadingDian = true;
      //deep_thinking 深度思考 auto_agent 智能调度 normal_agent 快速推理
      this.flagTypeData = true;

      let events = `[${JSON.stringify({
        // event_name:
        //   this.tabIndex == 0
        //     ? "auto_agent"
        //     : this.tabIndex == 1
        //     ? "normal_agent"
        //     : "deep_thinking",
        event_name:
          this.thinkingToSwitch == 1 ? "normal_agent" : "deep_thinking",
        event_type: "user_input",
      })}]`;
      if (!this.robotAnswerRequestInstance) {
        this.robotAnswerRequestInstance = window.chatSseSdk.initQuestionBySse(
          this.getCenterDataBySseSuccess,
          this.getCenterDataBySseError,
          {
            showSourceTitle: true,
            closeSource: false,
            finishCallback: () => {
              console.log("sse end");
              this.isGenerate = false;
              this.isuse = false;
              // 问出问句后查看是否收藏
              const ref = this.$refs.blmRender;
              if (Array.isArray(ref) && ref[this.sessionArr.length - 2]) {
                ref[this.sessionArr.length - 2].getCollect();
              }
              this.$forceUpdate();
              this.$nextTick(() => {
                if (this.$refs.scrollRef) {
                  this.$refs.scrollRef.scrollTop =
                    this.$refs.scrollRef.scrollHeight;
                }
              });
            },
            tableOpts: {
              filterRateCols: true,
              //过滤费率相关字段
              filterCustomCols: (col) => {
                //自定义过滤
                return true;
              },
            },
          }
        );
      }
      let session = {
        sessionId: "123",
        isBlm: -1,
        isSignal: 0,
        blmParseData: [],
        blmOpts: {
          showStep: false,
          answerSatge: window.chatSseSdk.ANSWER_STAGE.UNKNOW,
        },
        answers: {},
        // 推荐问句数据格式

        response: {},
      };
      const urls = getUrlParams();
      const question = this.question
        ? this.question
        : urls.question
        ? urls.question
        : this.questionParams.question;
      let user_id = _getRandomUserId();
      let source = "b_customer_trail_04";
      let channel = "other";
      const params = {
        question: question,
        event: JSON.stringify({
          eventId: "click",
          question: question,
        }),
        entity_info: JSON.stringify({ device_type: detectDeviceType() }),
        source: source,
        user_id: user_id,
        session_code: _getSessionCode(32, 16),
        session_id: _getSessionId(user_id, source),
        add_info: JSON.stringify({
          command: { needCommand: true },
          zhengu: {},
          talk: { needIdentify: true, needImg: true },
          finance: {
            ans_type: "NORMAL",
            needFurther: true,
            needFurtherKnow: true,
          },
          soniu: { needEliminate: true },
          urp: { keyValue: {}, custId: "" },
          recommend_version: "1.0",
          entranceId: "",
          stockName: "同花顺",
        }),
        localMode: [
          "zhengu",
          "iwencai",
          "soniu",
          "kefu",
          "command",
          "news",
          "talk",
          "sensitive",
          "finance",
        ],
        multistage: JSON.stringify({ is_multistage: false }),
        qaDataOrigin: "commonRobot",
        user_name: getRandomStr(10),
        version: "2.0",
        answerChannel: `${detectDeviceType()}_${channel}`,
        mode: "preCloud",
        logid: `${user_id}${new Date().getTime()}`,
        events: events,
        reqid: getReqid(),
        language: "zh-CN",
        // question,
        // userId:
        //   "KMctCr1klzpDFkzyIyVxfhWhI/vFChhRW4V741yeoJRcI9R34i3CG5Uf+nbFfjEE",
        // source: "b_customer_trail_04",
        // mode: "preCloud",
        // event: JSON.stringify({
        //   eventId: "bottom_label",
        //   question: question,
        //   secondaryLabel: question
        // }),
        // entity_info: JSON.stringify({ device_type: "iphone" })
      };

      this.isGenerate = true;
      this.isuse = true;
      console.log(this.sessionAr, "session");
      this.sessionArr.push({
        question,
        session,
      });
      this.questionNew = question.replace(/[\r\n]/g, "");
      this.question = "";
      console.log(this.sessionArr, "sessionArr");
      this.sessionArr.forEach((item, index) => {
        const ref = this.$refs.blmRender;
        if (Array.isArray(ref) && ref[index] && item.question == question) {
          ref[index].history = false;
        } else if (ref && !Array.isArray(ref) && index === 0) {
          ref.history = false;
        }
      });
      const formParams = new URLSearchParams();
      if (this.questionParams && Object.keys(this.questionParams).length > 0) {
        for (const key in this.questionParams) {
          if (this.questionParams.hasOwnProperty(key)) {
            formParams.append(key, this.questionParams[key]);
          }
        }
      } else {
        for (const key in params) {
          if (params.hasOwnProperty(key)) {
            formParams.append(key, params[key]);
          }
        }
      }
      // 2. 关闭键盘：使 textarea 失去焦点
      this.$nextTick(() => {
        this.$refs.myTextarea.blur();
      });

      console.log(1111, formParams.toString());
      // questionParams为推荐问句数据
      const sessionParams = this.questionParams ? this.questionParams : params;

      this.robotAnswerRequestInstance.sendQuestinBySse(sessionParams, session, {
        isDeep: true,
        // mockUrl: './stream-query-gateway/gateway/sse/investment-ai-expert/ai-expert/finance/query',
        mockUrl: "./stream-query/",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
          "open-authorization":
            "BearereyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhcHBfdHlwZSI6MCwidXNlcl9pZCI6MTA4MzEsInVzZXJfbmFtZSI6IjY1ODEwMEZEMDAxNyIsImJyb2tlcl9pZCI6NiwidXNlcl9zb3VyY2UiOjAsImlzcyI6ImIyYi1nYXRld2F5IiwiZXhwIjoxNzQ3OTAyMTI0fQ.mjl0R1JYDVCZnuvNKoUxTQAW53fRvY9HbW-opuKL2Q0",
        },
        fetchEventParams: {
          body: formParams.toString(),
        },
      });
      //   // 渲染数据完成之后 停止变成发送
      this.isGenerate = false;
      // 渲染数据完成之后 清除问句
      this.questionParams = {};
      setTimeout(() => {
        this.isLoadingDian = false;
      }, 5000);
    },

    renderNormalData(resData, session) {
      console.log(session, "sessionsessionsession");
      console.log("-----normalData", resData, resData.answer[0]);
      if (resData.answer[0]) {
        if (JGY_TYPES.includes(resData.answer[0].source)) {
          if (resData.answer[0].txt[0]) {
            if (
              resData.answer[0].txt[0].type === "NORMAL_TEXT" ||
              resData.answer[0].source === "talk"
            ) {
              session.answers = {
                content: resData.answer[0].txt[0].content,
                useNormalText: true,
              };
            } else if (resData.answer[0].source === "kefu") {
              session.answers = {
                content: JSON.parse(resData.answer[0].txt[0].content).answer,
                useNormalText: true,
              };
              let objs = JSON.parse(resData.answer[0].txt[0].content);
              if (objs.display_answer) {
                let objcontents = JSON.parse(objs.display_answer);
                console.log(objcontents, "objcontentsobjcontents");
                const params = objcontents[0].params; // 提取url
                const targetUrl = params.url;
                if (this.isLoadingHistory == false && targetUrl) {
                  setTimeout(() => {
                    window.location = targetUrl;
                  }, 1000); // 2000毫秒 = 2秒
                }
              }
            } else {
              session.answers = {
                content: JSON.parse(resData.answer[0].txt[0].content),
              };
            }
            session.response.answer = [
              {
                type: resData.answer[0].txt[0].type,
                sugArr: resData.answer[0].sugArr,
                intent: resData.answer[0].intent,
              },
            ];
          }
        }
      }
    },
    loadScript(url) {
      return new Promise((resolve, reject) => {
        // 创建一个新的 script 元素
        const script = document.createElement("script");

        // 设置 script 的 src 属性为要加载的 JS 文件的 URL
        script.src = url;

        // 设置 script 的 type 属性为 'text/javascript'
        script.type = "text/javascript";

        // 可选：设置 script 的 async 或 defer 属性
        // script.async = true; // 异步加载，不保证执行顺序
        // script.defer = true; // 延迟加载，保证执行顺序

        // 添加 script 元素到文档的 head 中
        document.head.appendChild(script);

        // 添加 onload 事件处理程序，以便在脚本加载完成后解析 Promise
        script.onload = function () {
          console.log(`Script loaded: ${url}`);
          resolve();
        };

        // 添加 onerror 事件处理程序，以便在脚本加载失败时拒绝 Promise
        script.onerror = function () {
          console.error(`Failed to load script: ${url}`);
          reject(new Error(`Failed to load script: ${url}`));
        };
      });
    },
  },
};
</script>

<style lang="less">
@import (once) "@/styles/variable.less";
@import "@/styles/index.css";

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: url("@/assets/images/bg.png") no-repeat center center;
}

#app {
  // border: 0.3rem solid black;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  flex-direction: column;
  font-size: 16px;
  background: url("@/assets/images/bg.png") no-repeat center center;
  background-size: 100% 100%;
  // background-color: pink;
  display: flex;
  flex-direction: column;
  height: 100vh;

  /* 兼容非iOS设备 */
  .top-titles {
    position: fixed;
    width: 100%;
    height: 88px;
    // padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-self: center;
    vertical-align: middle;
    // background: url("@/assets/images/top_bg.png") no-repeat center center;
    background-size: 100% 100%;
    // background-color: red;
    z-index: 3;
    font-size: 12px;

    // background-color: skyblue;
    .titleLeft {
      padding-top: 45px;
      display: flex;
      justify-content: center;
      align-items: center;

      .left-icon {
        display: flex;
        width: 26px;
        height: 26px;
        line-height: 21px;
        padding-right: 5px;
        background: url("@/assets/images/left.png") no-repeat center center;
        background-size: contain;
      }

      .center-imgs {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        // background: pink;
        background: url("@/assets/images/photo.png") no-repeat center center;
        background-size: contain;
      }

      .right-name {
        font-size: 16px;
        font-weight: bold;
        line-height: 21px;
        margin-left: 10px;
      }
    }

    .rightImg {
      width: 26px;
      height: 26px;
      margin-right: 10px;
      background: url("@/assets/images/menu.png") no-repeat center center;
      background-size: contain;
      margin-top: 58px;
    }

    .dailog_box {
      position: absolute;
      top: 88px;
      right: 20px;
      width: 140px;
      height: 175px;
      background: #fff;
      box-shadow: 0px 4px 20px -1px rgba(174, 179, 190, 0.7);
      border-radius: 15px 15px 15px 15px;
      opacity: 1;

      .dailog_content {
        display: flex;
        justify-content: start;
        padding-top: 13px;
        padding-bottom: 13px;
        // background-color:pink;
        opacity: 1;
        border-bottom: 0.5px solid #ececec;

        .dailog_icon {
          padding-left: 15px;
          display: inline-block;
          width: 18px;
          height: 18px;
          vertical-align: middle;
        }

        .dailog_text {
          padding-left: 12px;
          font-size: 15px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #232428;
          line-height: 16px;
        }
      }
    }
  }

  ._body {
    // height: calc(100vh - 253px); /* 100vh - (93px + 160px) */
    margin-top: 86px;
    overflow: auto;
    box-sizing: border-box;

    ._history {
      // margin-top: 102px;
      background-color: transparent;
    }

    ._cell {
      padding: 10px 20px;
      padding-top: 12px;
      overflow-y: auto;
    }

    ._question-box {
      margin-bottom: 10px;
      display: flex;
      justify-content: flex-end;
      margin-top: 12px;

      ._question-xin {
        width: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;

        .img_xin {
          -webkit-tap-highlight-color: transparent;
        }

        img {
          flex-shrink: 0;
          width: 20px;
          height: 20px;
          margin-bottom: 5px;
        }

        i {
          white-space: nowrap;
          font-size: 14px;
          color: #333;
        }
      }
    }

    ._question {
      max-width: 100%;
      /* 限制最大宽度，不让文字无限扩展 */
      width: fit-content;
      /* 内容决定宽度，但不会超过最大宽度 */
      background: linear-gradient(207deg, #2793f0 0%, #0883f1 100%);
      color: rgb(249, 255, 255);
      border-radius: 10px 10px 2px 10px;
      padding: 10px;
      text-align: left;
      word-break: break-word;
      /* 强制长词或URL也能断行 */
      white-space: normal;
      /* 允许自动换行 */
      line-height: 21px;
    }

    .rmwj_box {
      overflow: hidden;
      // margin-left: 5px;
      width: 261px;
      height: 295px;
      // background: url("@/assets/images/xgwt_logo.png") no-repeat center center;

      .rmtj_top {
        width: 100%;
        display: flex;
        justify-content: start;
        margin-top: 25px;
        height: 25px;

        // background-color: pink;
        .top_left {
          width: 37px;
          height: 38px;
          margin-top: 5px;
        }

        .top_text {
          font-size: 18px;
          font-family: Alibaba PuHuiTi 3-65 Medium, Alibaba PuHuiTi 30;
          font-weight: 500;
          color: #333333;
          line-height: 30px;
        }

        .top_right {
          margin-top: 5px;
          display: flex;
          margin-left: auto;
          /* 自动推到最右边 */
          display: flex;
          align-items: center;
          margin-right: 20px;

          .top_right_img {
            width: 15px;
            height: 15px;
            vertical-align: middle;
          }

          .top_right_text {
            font-size: 13px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 14px;
            margin-left: 3px;
          }
        }
      }

      .rmtj_content {
        .rmtj_list {
          display: flex;
          justify-content: space-between;
          margin: 0 auto;
          margin-top: 5px;
          box-sizing: border-box;
          height: 40px;
          background: rgba(255, 255, 255, 0.6);
          border-radius: 6px 6px 6px 6px;
          opacity: 1;
          border: 1px solid;
          border-image: linear-gradient(
              180deg,
              rgba(255, 255, 255, 1),
              rgba(255, 255, 255, 0.20000000298023224)
            )
            1 1;

          .rmtj_list_text {
            width: 86%;
            padding-left: 10px;
            font-size: 15px;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 40px;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 超出部分显示省略号 */
          }

          .rmtj_list_imgs {
            width: 15px;
            height: 15px;
          }
        }
      }
    }
  }

  ._footer {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    width: calc(100% - 40px);
    flex-shrink: 0;
    // background: url("@/assets/images/bottom_bg.png") no-repeat center center;
    background-size: 100% 100%;

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    // height: 100px;
    .rets {
      display: flex;
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-bottom: 10px;
      height: 40px;

      &::-webkit-scrollbar {
        display: none;
      }

      .tj_content {
        flex: 0 0 auto;
        margin-left: 10px;
        width: 111px;
        height: 40px;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 12px;
        line-height: 40px;
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #232428;

        .icons {
          display: inline-block;
          width: 15px;
          height: 15px;
          background-size: 100% 100%;
          vertical-align: middle;
          margin-bottom: 2px;
          margin-right: 2px;
        }
      }
    }

    ._input-deepThink.isInitialHeight {
      align-items: flex-end !important; // !important;
      padding-bottom: 10px;
    }

    ._input-deepThink {
      position: relative;
      // width: 100%;
      display: flex;
      align-items: flex-start; //
      align-items: center;
      min-height: 54px;
      border: 1px solid transparent;
      /* 透明边框保留空间 */
      border-radius: 15px;
      background-image: linear-gradient(#f6f5fb, #f6f5fb),
        /* 与背景色相同 */
          linear-gradient(
            270deg,
            rgba(8, 131, 241, 1),
            rgba(159, 129, 246, 1),
            rgba(243, 178, 246, 1)
          );
      background-origin: border-box;
      background-clip: content-box, border-box;
      background-clip: padding-box, border-box;
      /* ✅ 修改这里 */

      textarea {
        width: 100%;
        font-size: 16px;
        border: none;
        line-height: 24px;
        background-color: transparent;
        padding: 0;
        margin: 0;
        resize: none;
        overflow: hidden;
        transition: height 0.2s ease;

        &:focus {
          outline: none;
        }
      }

      .isDeepThink {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        margin-right: 20px;
        margin-left: 20px;
      }

      .right-btn {
        display: flex;

        .img_hua,
        .img_upload {
          width: 24px;
          height: 24px;
          margin-right: 20px;
          cursor: pointer;
        }

        .img_hua {
          margin-right: 10px;
        }

        .img_upload {
          margin-left: 0px;
        }

        .sendBtn,
        .sentBtnInner {
          background: none;
        }

        .sendBtn,
        .sentBtnInner {
          width: 24px;
          height: 24px;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          border: none;
          cursor: pointer;
          margin-right: 20px;
        }

        .sendBtn {
          background-image: url("@/assets/images/upload.png");
        }

        .sentBtnInner {
          background-image: url("@/assets/images/sendBtnActive.png");
        }
      }
    }

    .gnbottomadd {
      display: flex;
      justify-content: start;
      width: 100%;
      height: 100px;

      // background-color: pink;
      .gnbottomadd_content {
        margin-top: 15px;
        // margin-left: 15px;
        width: 70px;
        height: 90px;
        padding-bottom: 7px;

        // background: #0883f1;
        &:nth-child(2) {
          margin-left: 15px;
        }

        &:nth-child(3) {
          margin-left: 15px;
        }

        .jgn_buttomimgs {
          width: 70px;
          height: 70px;
        }

        .jgn_buttomtext {
          // padding-top:5px;
          font-size: 13px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #232428;
          line-height: 20px;
        }
      }
    }

    .text {
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #9998a9;
      margin-top: 15px;
    }
  }

  .useKonws {
    width: 275px;
    // height: 304px;
    border-radius: 15px 15px 15px 15px;
    background-color: #fff;
    overflow: hidden;

    .useTop {
      display: flex;
      flex-direction: column;
      text-align: left;
      width: 215px;
      height: 254px;
      background-color: #fff;
      margin-top: 20px;
      margin-left: 30px;

      .useTopText {
        display: flex;
        justify-content: center;
        color: #333333;
        font-weight: 800;
        font-size: 16px;
      }

      .titleText {
        color: #333333;
        font-weight: regular;
        font-size: 15px;
        line-height: 24px;
        letter-spacing: 0px;
        margin-top: 10px;
      }

      .textShuo {
        margin-top: 7px;
        color: #0883f1;
      }

      .useRadio .van-radio {
        display: flex;
        align-items: flex-start !important;
        margin-top: 20px;
      }

      .useRadio .van-radio .van-radio__label {
        color: #333333;
        font-size: 15px;
        line-height: 20px;
      }
    }

    .useBtn {
      width: 100%;
      height: 50px;
      border-top: 1px solid #ececec;
      overflow: hidden;

      .btn {
        width: 50%;
        border-top: none;
        height: 100%;
        color: #999999;
        font-size: 16px;
      }

      .btn:last-child {
        border-right: none;
        border-left: none;
        height: 100%;
        color: #0883f1;
      }
    }
  }
}

.ai-popup {
  width: 285px;
  height: 224px;
  background: url("/src//assets//images/dailogleftbottom_box.png");
  background-size: 285px 224px;
  z-index: 9999;
  position: absolute;
  left: -25px;
  bottom: 30px;
}

.img-box {
  width: 285px;
  margin-left: 25px;
  height: 224px;
  height: 170px;
  margin-top: 22px;
  display: flex;
  flex-direction: column;
}

.ai-popup-item {
  height: 62px;
  border-bottom: 0.5px solid #ececec;
  display: flex;
  align-items: center;
  padding-left: 15px;
}

.ai-popup-item:last-child {
  border-bottom: none;
}

.ai-popup-item-img {
  width: 24px;
  height: 24px;
}

.ai-popup-item-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding-left: 10px;
}

.ai-popup-item-text span:nth-child(1) {
  color: #232428;
  font-family: PingFang SC;
  font-weight: regular;
  font-size: 16px;
  line-height: 26px;
}

.ai-popup-item-text span:nth-child(2) {
  color: #999999;
  font-family: PingFang SC;
  font-weight: regular;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: 0px;
  text-align: left;
}

.audioAutoBox {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  background: url("@/assets/images/dailogcollect.png") no-repeat center center;
  background-size: 100% 100%;
  padding-top: 15px;
  box-sizing: border-box;
}

.collectOutbox {
  width: 100%;
  padding-top: 60px;
  background: url("@/assets/images/dailogcollect.png") no-repeat center center;
  background-size: 100% 100%;

  // background-color: #f6eff8;
}

.audioAutoBox-top {
  width: 48px;
  height: 20px;
  border-radius: 77px;
  margin: 0 auto;
  background: white;
}

.audioAutoBox-top img {
  width: 20px;
  height: 20px;
}

.audioAutoBox-btn {
  position: relative;
  /* 让内部绝对定位元素相对于这个容器 */
  height: 122px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.audioAutoBox-btn .line-img {
  width: 297px;
  height: 28px;
}

.audioAutoBox-btn .icon-img {
  position: absolute;
  width: 80px;
  /* 可根据实际图标大小调整 */
  height: 80px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 完全居中叠加在背景图中心 */
  background-image: url("@/assets/images/yuyin_bigicon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

.clear-questionAudio {
  position: absolute;
  width: 90px;
  /* 可根据实际图标大小调整 */
  height: 36px;
  top: 50%;
  left: 20%;
  transform: translate(-50%, -50%);
  /* 完全居中叠加在背景图中心 */
  border-radius: 12px;
  background: #f5f7fc;
  line-height: 36px;
  color: #999999;
}

.clear-save {
  position: absolute;
  width: 90px;
  /* 可根据实际图标大小调整 */
  height: 36px;
  top: 50%;
  right: 20%;
  transform: translate(50%, -50%);
  /* 完全居中叠加在背景图中心 */
  border-radius: 12px;
  background: #eef6fe;
  line-height: 36px;
  color: #0883f1;
}

::v-deep .cancel {
  display: flex;
  align-item: center;
  flex-wrap: nowrap;
  color: #232428;
  font-size: 13px;
  line-height: 20px;
  padding: 17px 20px;
}

.deleteIcon {
  display: flex;
  width: 14px;
  height: 14px;
  background: url("@/assets/images/sc_bottomdelet.png") no-repeat center center;
  background-size: contain;
}

.collectList {
  height: 300px;
  padding: 5px 15px;
  padding-bottom: 40px !important;
  box-sizing: border-box;
  overflow: auto;
  background: url("@/assets/images/dailogcollect.png") no-repeat center center;
  background-size: 100% 100%;

  // background-color: #f6eff8;
  .collectItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    width: 90%;
    padding: 15px 12px;
    color: #232428;
    font-weight: bold;
    font-size: 15px;
    border-radius: 15px;
    margin-bottom: 10px;
    background: linear-gradient(
      270deg,
      #ffffff99 0%,
      #ffffff66 51%,
      #ffffff7f 100%
    );

    .itemLeftBox {
      display: flex;
      align-items: center;

      .collectIcon {
        display: flex;
        width: 10px;
        height: 10px;
        background: url("@/assets/images/sc_bottomicon.png") no-repeat center
          center;
        background-size: contain;
        padding-left: 12px;
      }

      .collectText {
        line-height: 20px;
        font-size: 15px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #232428;
      }
    }

    .moreIcon {
      width: 24px;
      height: 24px;
      background: url("@/assets/images/sc_bottomslh.png") no-repeat center
        center;
      background-size: contain;
      border: none;
      // background: none;
      padding: 0;
      margin: 0;
    }
  }
}

.submitBox {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: url("@/assets/images/dailogcollect.png") no-repeat center center;
  background-size: 100% 100%;
  // background-color: #fff;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: center;

  .btnPrimary {
    width: 90%;
    height: 46px;
    background: #0883f1;
    border-radius: 12px;
  }
}

.checkOutbox {
  width: 100%;
  height: 100%;
  padding-bottom: 150px;
  background-color: #fefefe;
}

.checkbox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  padding: 17px;
  margin-top: 45px;
  background-color: #fefefe;
}

.checkbox .van-checkbox {
  white-space: nowrap;
}

.title {
  position: fixed;
  left: 50%;
  // width: 100%;
  height: 30px;
  z-index: 1000;
  transform: translateX(-50%);
  text-align: center;
  color: #333333;
  font-weight: bold;
  font-size: 16px;
  line-height: 26px;
  padding-top: 13px;
  padding-bottom: 13px;
  // background-color: #f3f1fa;
}

.textContent {
  width: 325px;
  height: 245px;
  border-radius: 15px;
  border: 1px solid #9999994c;
  margin-left: 15px;
  padding: 12px 15px;
}

.is-use {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  // border-radius: 0px 0px 12px 12px;
  padding-bottom: 5px;

  .left-content {
    display: flex;
    justify-content: start;

    .is-use-content {
      width: 30px;
      height: 20px;
      // border-radius: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 3px 0px 3px 10px;
      font-size: 14px;
      margin: 5px 0px;
      white-space: nowrap;

      .icon {
        display: flex;
        width: 20px;
        height: 20px;
        margin-right: 0px;
      }

      &:nth-child(1) .icon {
        background: url("@/assets/images/copy.png") no-repeat center center;
        background-size: contain;
        background-color: #fff;
      }

      &:nth-child(2) .icon {
        background: url("@/assets/images/refresh.png") no-repeat center center;
        background-size: contain;
        background-color: #fff;
      }

      &:nth-child(3) .icon {
        background: url("@/assets/images/do2wnload.png") no-repeat center center;
        background-size: contain;
        background-color: #fff;
      }

      &:nth-child(3) .iconFalse {
        background: url("@/assets/images/dow234nload.png") no-repeat center
          center;
        background-size: contain;
        background-color: #fff;
      }

      &:nth-child(4) .icon {
        background: url("@/assets/images/downl1oad.png") no-repeat center center;
        background-size: contain;
        background-color: #fff;
      }

      &:nth-child(4) .iconNoFalse {
        background: url("@/assets/images/d345ownload.png") no-repeat center
          center;
        background-size: contain;
        background-color: #fff;
      }
    }
  }

  .right-content {
    display: flex;
    justify-content: flex-end;
    padding-right: 15px;

    .is-sc-content {
      // width: 30px;
      height: 20px;
      // border-radius: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 3px 0px 3px 10px;
      font-size: 14px;
      margin: 5px 0px;
      white-space: nowrap;

      .icon {
        display: flex;
        width: 20px;
        height: 20px;
        margin-right: 0px;
      }

      .icon-xin {
        background: url("@/assets/images/xinxin1.png") no-repeat center center;
        background-size: contain;
        background-color: #fff;
      }

      .icon-xin1 {
        background: url("@/assets/images/xinxin.png") no-repeat center center;
        background-size: contain;
        background-color: #fff;
      }

      .icon-share {
        display: flex;
        width: 20px;
        height: 20px;
        margin-right: 0px;
        background: url("@/assets/images/kefu.png") no-repeat center center;
        background-size: contain;
        background-color: #fff;
      }

      .icons {
        vertical-align: middle;
        font-size: 14px;
        line-height: 15px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        margin-left: 2px;
      }
    }
  }
}

.van-cell {
  padding: 10px 7px !important;
}

.top_hytitle {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 15px;

  .letf_line {
    width: 135px;
    height: 0px;
    opacity: 0.5;
    border: 1px solid;
    border-image: linear-gradient(
        270deg,
        rgba(153.00000607967377, 152.0000061392784, 169.00000512599945, 1),
        rgba(153.00000607967377, 152.0000061392784, 169.00000512599945, 0)
      )
      1 1;
    // margin-right: 10px;
    margin-top: 6px;
  }

  .center_text {
    width: 105px;
    // width: 56px;
    // height: 22px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #9998a9;
  }

  .right_line {
    width: 135px;
    height: 0px;
    opacity: 0.5;
    border: 1px solid;
    border-image: linear-gradient(
        90deg,
        rgba(153.00000607967377, 152.0000061392784, 169.00000512599945, 1),
        rgba(153.00000607967377, 152.0000061392784, 169.00000512599945, 0)
      )
      1 1;
    margin-top: 6px;
    // margin-left: 10px;
  }
}

.questionAudio {
  width: 90%;
  border: none;
  background: none;
  height: 150px;
  margin-top: 20px;
  line-height: 22px;
}

.tell_p {
  color: #676586;
  font-weight: regular;
  font-size: 13px;
  letter-spacing: 0px;
  text-align: center;
}

.dot-loading {
  width: 60px;
  height: 30px;
  background: white;
  border-radius: 10px;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: black;

  opacity: 0;
  animation: dotFlash 1.5s infinite;
}

.dot:nth-child(1) {
  animation-delay: 0s;
}

.dot:nth-child(2) {
  animation-delay: 0.3s;
}

.dot:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes dotFlash {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  30% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}
</style>
